<template>
    <div class="count">
        <div class="topTit f f-a-c f-j-b">
            <div class="left f f-a-c">
                <img src="/src/status/img/logo.png" class="logo" alt="">
                <span>H.S.国际问题研究平台</span>
            </div>
            <div class="right">
                <img @click="setting" src="/src/status/img/geng.png" class="myStat" alt="">
            </div>

        </div>

        <div class="body">
            <div class="topNum f f-a-c">
                <div class="lef bor">
                    <div class="t">剩余流量总额(M)</div>
                    <div class="num">{{obj.surplus_traffic}}</div>
                </div>
                <div class="lef">
                    <div class="t">本月已使用(M)</div>
                    <div class="num">{{obj.month_traffic}}</div>
                </div>
            </div>
            <div class="tit">
                <div class="main" id="main">

                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from '../../router';
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import { GetTraffic } from '../../api/index'
let obj = ref({})
let dataList = ref([])
let dateList = ref([])

onMounted(() => {
    initList()
    setTimeout(() => {
        comip()
    }, 500)

})
const initList = async () => {
    let n = await GetTraffic()
    obj.value = n.content
    // 处理名字
    dataList.value = n.content.list.map(item => {
        return {
            value: item.traffic, itemStyle: {
                color: '#32bbea'
            }
        }
    })
    dateList.value = n.content.list.map(item => {
        return item.format_time
    })
    console.log(dataList.value, dateList.value, '8999999999999999999999999999');
}
const comip = () => {
    let myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title: {
            text: '流量统计图'
        },
        tooltip: {},
        xAxis: {
            data: dateList.value,
            axisLabel: {
                interval: 0,
                formatter: function (params) {
                    var newParamsName = ''
                    const paramsNameNumber = params.length
                    const provideNumber = 6 // 单行显示文字个数
                    const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                    if (paramsNameNumber > provideNumber) {
                        for (let p = 0; p < rowNumber; p++) {
                            var tempStr = ''
                            var start = p * provideNumber
                            var end = start + provideNumber
                            if (p === rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber)
                            } else {
                                tempStr = params.substring(start, end) + '\n'
                            }
                            newParamsName += tempStr
                        }
                    } else {
                        newParamsName = params
                    }
                    return newParamsName
                }
            }
            // dateList.value
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                barWidth: 10,
                data: dataList.value
                // [{
                //     value: 50, itemStyle: {
                //         color: '#32bbea'
                //     }
                // }, {
                //     value: 200, itemStyle: {
                //         color: '#32bbea'
                //     }
                // }, {
                //     value: 300, itemStyle: {
                //         color: '#32bbea'
                //     }
                // }, {
                //     value: 100, itemStyle: {
                //         color: '#32bbea'
                //     }
                // }, {
                //     value: 150, itemStyle: {
                //         color: '#32bbea'
                //     }
                // }, {
                //     value: 200, itemStyle: {
                //         color: '#32bbea'
                //     }
                // }]
            }
        ]
    });
}
// 绘制图表
// 返回首页
const setting = () => {
    router.push('/IndexMove')
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 3.75) * 1vw;
}

.topNum {
    width: 100%;
    height: pxfn(88);
    background: #ffffff;
    border-radius: pxfn(12);
    padding: pxfn(15);
    margin-bottom: pxfn(15);

    .lef {
        width: 50%;
        text-align: center;

        .t {
            font-size: pxfn(12);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            color: #868d9c;
            margin-bottom: pxfn(6);
        }

        .num {
            font-size: pxfn(24);
            font-family: PingFang SC, PingFang SC-600;
            font-weight: 600;
            color: #1d2129;
        }
    }

    .bor {
        border-right: pxfn(1) solid #edf3fa;
    }
}

.main {
    height: pxfn(344) !important;
    width: 100%;
}

.canvas {
    height: pxfn(344) !important;
    width: 100%;
}

.body {
    height: calc(100vh - pxfn(48));
    background-color: #edf3fa;
    padding: pxfn(15);

    .tit {
        padding: pxfn(15);
        background-color: #fff;
        border-radius: pxfn(10);
    }

    // .main {
    //     height: 200px;
    // }
}



.count {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: pxfn(50);
}

.topTit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: pxfn(48);
    border: 1px solid #edf3fa;
    padding: pxfn(15);
    z-index: 1;
    font-size: pxfn(14);
    font-weight: 600;

    .logo {
        width: pxfn(27);
        height: pxfn(24);
        margin-right: pxfn(10);
    }

    .myStat {
        width: pxfn(24);
        height: pxfn(24);
    }
}
</style>